import React from "../src/react";
import ReactDOM from "../src/react-dom/client";

function ChildComponent1(props, forwardRef){


  return <div>
    <input ref={forwardRef}/>
  </div>
}


const ForwardChildComponent = React.forwardRef(ChildComponent1);

class ChildComponent extends React.Component{

  state = {
    itemCount: this.props.count,
  }

  static getDerivedStateFromProps(nextProps, prevState){
    if(nextProps.count !== prevState.itemCount){
      return {
        itemCount: nextProps.itemCount
      }
    }
    return null;
  }

  componentWillReceiveProps(){
    // console.log('     child -props');
  }

  shouldComponentUpdate(nextProps){
    // console.log("      child -shouldupdate");
    return nextProps.count%3 === 0;
  }

  componentWillMount(){
    // console.log('      child -willmount');
  }
  componentWillUnmount(){
    // console.log('      child -willunmount');
  }
  render(){
    // console.log('      child -render');
    return <div>
      子组件{this.props.count}
    </div>
  } 

  componentDidMount(){
    // console.log('      child didmount');
  }

}

class ParentComponent extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      number: 1,
      list: ['a','b', 'c', 'd']
    }
  }
  
  inputRef = React.createRef();

  handleClick = () => {
    if(this.inputRef.current){
      this.inputRef.current.focus();
    }

    this.setState({
      number: this.state.number+1,
      list: ['c', 'b']
    })
  }
  
  componentWillMount(){
    // console.log('count 1 -willmount');
  }
  componentDidMount(){
    // console.log("count 3 -didmount");
  }

  shouldComponentUpdate(){
    // console.log("count 4 -shouldupdate");
    return true;
  }
  componentWillUpdate(){
    // console.log('count 5 - willupdate');
  }
  componentDidUpdate(){
    // console.log('count 6 -didupdate');
  }
  
  componentWillUnmount(){
    // console.log('卸载前');
  }

  render(){
    // console.log('count 2 -render-------');
    return <div>
      <p>{this.state.number}</p>
      {this.state.number === 4 ? null: <ChildComponent count={this.state.number}/>}
      <button onClick={this.handleClick}>点击</button>
      {/* <ul>
        {
          this.state.list.map(el => {
            return <li>{el}</li>;
          })
        }
      </ul> */}
    </div>
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<ParentComponent />)


